<template>
  <v-row class="ma-4">
    <v-col v-for="(item, i) in LineItems" :key="i" cols="12" md="4" lg="3">
      <v-card color="primary" variant="elevated" class="mx-auto">
        <v-card-item>
          <div>
            <div class="text-h6 mb-1">
              {{ item.title }}
            </div>
            <v-card-subtitle>
              {{ item.href }}
            </v-card-subtitle>
            <!-- <div class="text-caption">前往总控大屏</div> -->
          </div>
        </v-card-item>

        <v-card-actions class="justify-end">
          <v-btn @click="onGoLine(item)">Let's go</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">

interface LineItem {
  title: string;
  href: string;
}

const LineItems: LineItem[] = [
  {
    title: '1 Line',
    href: 'http://182.168.1.103:9000',
  },
  {
    title: '2 Line',
    href: 'http://182.168.2.103:9000',
  },
  {
    title: '3 Line',
    href: 'http://182.168.3.103:9000',
  },
  {
    title: '4 Line',
    href: 'http://182.168.4.103:9000',
  },
  {
    title: 'Semi-auto Line',
    href: 'http://182.168.1.12:9000',
  },
  {
    title: 'Packaging Line',
    href: 'http://192.168.1.10:9000',
  },
];

const onGoLine = ({ href }: { href: string }): void => {
  window.open(href, '_blank');
}
</script>
